<template>
    <div class="swiper lunbos">
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item,index) in imgList" :key="index">
                <a :href="item.link" class="inner-img-box" :style="{backgroundImage:`url(${imgUrl+encodeURIComponent(item.image)})`, backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover',height:'100%'}"></a>
            </el-carousel-item>
        </el-carousel>
            <!--<swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="imgList.length!=0">-->
                <!--<swiper-slide v-for="(item,index) in imgList" :key="index" >-->
                    <!--<a :href="item.link" :style="{backgroundImage:`url(${imgUrl+encodeURIComponent(item.image)})`, backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover'}">-->
                        <!--&lt;!&ndash;<img :src="imgUrl+item.image" alt="" />&ndash;&gt;-->
                    <!--</a>-->
                <!--</swiper-slide>-->
                <!--&lt;!&ndash; 常见的小圆点 &ndash;&gt;-->
                <!--<div class="swiper-pagination"  v-for="(item,index) in imgList" :key="index" slot="pagination" ></div>-->
            <!--</swiper>-->
    </div>
</template>

<script>
    export default {
        name: "swiper-ad",
        props:{
            imgList:{
                type:Array
            }
        },
        data() {
            const that = this;
            return {
                imgIndex: 1,
                swiperOption: {
                    //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    //循环
                    loop: true,
                    //设定初始化时slide的索引
                    initialSlide: 0,
                    //自动播放
                    autoplay: {
                        delay: 30000000,
                        stopOnLastSlide: true,
                        /* 触摸滑动后是否继续轮播 */
                        disableOnInteraction: true
                    },
                    //滑动速度
                    speed: 800,
                    //滑动方向
                    direction: "horizontal",
                    //小手掌抓取滑动
                    grabCursor: true,
                    on: {
                        //滑动之后回调函数
                        slideChangeTransitionStart: function() {
                            /* realIndex为滚动到当前的slide索引值 */
                            that.imgIndex= this.realIndex - 1;
                        },
                    },
                    //分页器设置
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: "bullets"
                    },
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    .lunbos{
        position: relative;
        //width: @width;
        margin: 0 auto;
        height: 800px;
        .inner-img-box{
            display: block;
            width: 100%;
            height: 100%;
        }
        .img{
            width: 100%;
            height: 100%;
        }
        .btn{
            position: absolute;
            width: 180px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #ffffff;
            background-color: @bgColor;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 30px;
            font-size: 20px;
            z-index: 10000000000000000;
        }
    }
    .swiper{
        width: 100%;
        height: 100%;
    }
    .swiper-wrap{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        a{
            display: block;
            width: 100%;
            height: 100%;
        }
    }

</style>
<style lang="less">
        .lunbos{
            .el-carousel{
                height: 100%;
                width: 100%;
            }
            .el-carousel__container{
                height: 100%;
                width: 100%;
            }
            img{
                width: 100%;
                height:100%;
            }
            .el-carousel__indicators--outside{
                position: absolute;
                transform: translateX(-50%);
            }
            .el-carousel__arrow{
                width: 80px;
                height: 80px;
                font-size: 40px;

            }
        }
</style>